<template>
  <PageWrapper :title="state.className" contentBackground>
    <template #extra>
      <a-button> {{ state.master }} </a-button>
      <a-button> 操作二 </a-button>
      <a-button type="primary"> 主操作 </a-button>
    </template>

    <template #footer>
      <a-tabs default-active-key="1" @change="tabsChange">
        <a-tab-pane key="1" tab="班级列表">
          <div :loading="loading">
            <a-table :columns="columns" :data-source="state.students">
              <template #headerCell="{ column }">
                <template v-if="column.key === 'name'">
                  <span> 姓名 </span>
                </template>
              </template>

              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'name'">
                  <a>
                    {{ record.name }}
                  </a>
                </template>
                <template v-else-if="column.key === 'sex'">
                  <span>
                    <a-tag
                      :color="
                        record.sex === '1' ? 'volcano' : record.sex === '2' ? 'geekblue' : 'green'
                      "
                    >
                      {{ record.sex === 1 ? '男' : '女' }}
                    </a-tag>
                  </span>
                </template>
                <template v-else-if="column.key === 'idcard'">
                  <a>
                    {{ record.idcard }}
                  </a>
                </template>
                <template v-else-if="column.key === 'action'">
                  <a-button type="primary">加分</a-button>
                  <a-divider type="vertical" />
                  <a-button type="primary" danger>减分</a-button>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="学力统计" :destroyInactiveTabPane="false">
          <div ref="chartRef" :style="{ height, width }"></div>
        </a-tab-pane>
      </a-tabs>
    </template>
  </PageWrapper>
</template>
<script lang="ts">
  import { ref, toRaw, reactive, PropType, Ref, onMounted, defineComponent } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useTeacherStore } from '/@/store/modules/teacher';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { router } from '/@/router';

  export default defineComponent({
    components: { PageWrapper },
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: 'calc(60vh)',
      },
    },
    setup() {
      const loading = ref(false);
      let columns = [
        {
          name: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '操行分',
          dataIndex: 'credit',
          key: 'credit',
        },
        {
          title: '学号',
          dataIndex: 'number',
          key: 'number',
        },
        {
          title: '性别',
          key: 'sex',
          dataIndex: 'sex',
        },
        {
          title: '操作',
          key: 'action',
        },
      ];
      let state = reactive<any>({
        classId: 'userid',
        master: '',
        className: '',
        students: [],
        dataAll: [],
        xAxisData: [],
        dataGrade: [
          { value: 0, name: '优' },
          { value: 0, name: '良' },
          { value: 0, name: '中' },
          { value: 0, name: '差' },
        ],
      });

      // 获取表格数据
      async function getClassList() {
        loading.value = true;
        console.log('1', router.currentRoute.value.query);
        try {
          await useTeacherStore()
            .getClassDetailAction(
              toRaw({
                id: router.currentRoute.value.query.id,
                mode: 'none', //不要默认的错误提示
              }),
            )
            .then((resolve) => {
              console.log(resolve);
              // state.master = resolve.master;
              // state.className = resolve.className;
              state.students = resolve;
              state.xAxisData = resolve.map((item) => {
                return item.name;
              });
              resolve.forEach((item) => {
                console.log(item);
                if (item.credit >= 90) {
                  state.dataGrade[0]['value'] += 1;
                }
                if (item.credit < 90 && item.credit >= 70) {
                  state.dataGrade[1]['value'] += 1;
                }
                if (item.credit < 70 && item.credit >= 60) {
                  state.dataGrade[2]['value'] += 1;
                }
                if (item.credit < 60) {
                  state.dataGrade[3]['value'] += 1;
                }
                state.dataAll.push(item.credit);
              });
              console.log(state);
              loading.value = false;
            });
        } catch (error) {
          console.log(error);
          loading.value = false;
        }
      }
      getClassList();

      // const chartRef = ref<HTMLDivElement | null>(null);
      let chartRef = ref<HTMLDivElement | null>(null);
      // const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
      function tabsChange(e) {
        // tab切换时才会创建渲染dom，导致如果在onMounted里面渲染会找不到dom元素,所以在change回调里渲染
        if (e === '2') {
          const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
          // 因使用echarts出现“There is a chart instance already initialized on the dom.” 警告提示，
          // 这个问题的出现在于，在一张表上渲染不同数据，其实dom已经存在了，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告
          if (chartRef.value == null) {
            setOptions({
              backgroundColor: '#0f375f',
              title: [
                {
                  text: '操行分分布',
                  left: '1%',
                  top: '45%',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                  },
                },
                {
                  text: '操行分等级占比',
                  left: '1%',
                  top: '1%',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                  },
                },
              ],
              grid: [{ left: '3%', top: '65%', width: '96%', height: '20%' }],
              tooltip: {
                formatter: '{b} ({c})',
              },
              xAxis: [
                {
                  gridIndex: 0,
                  data: state.xAxisData,
                  axisTick: { show: false },
                  axisLabel: {
                    interval: 0,
                    formatter: function (value) {
                      var str = value.split('');
                      return str.join('\n');
                    },
                  },
                  splitLine: { show: false },
                  axisLine: { show: true, lineStyle: { color: '#6173a3' } },
                  z: 10,
                },
              ],
              yAxis: [
                {
                  // gridIndex: 0,
                  axisTick: { show: false },
                  axisLabel: { show: true, color: '#999' },
                  splitLine: { show: false },
                  axisLine: { show: true, lineStyle: { color: '#6173a3' } },
                },
              ],
              legend: {
                orient: 'vertical',
                left: 'right',
                textStyle: {
                  //图例文字的样式
                  color: '#fff',
                  fontSize: 16,
                },
              },
              dataZoom: [
                {
                  type: 'inside',
                },
              ],
              series: [
                {
                  name: '操行分等级占比',
                  type: 'pie',
                  radius: [25, 60],
                  center: ['50%', '25%'],
                  labelLine: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)',
                    },
                  },
                  data: state.dataGrade,
                  label: {
                    show: true,
                    formatter: '{b} \n ({d}%)',
                    color: '#B1B9D3',
                  },
                },
                {
                  // name: '操行分分布',
                  type: 'bar',
                  xAxisIndex: 0,
                  yAxisIndex: 0,
                  barWidth: '70%',
                  itemStyle: { color: '#86c9f4' },
                  label: { show: true, position: 'top', color: '#9EA7C4' },
                  data: state.dataAll,
                },
              ],
            });
          }
        }
      }

      onMounted(() => {
        console.log('onMounted');
        console.log(1);
      });

      return { chartRef, columns, state, loading, tabsChange };
    },
  });
</script>
